<template>
  <div style="height: 100%">
    <div class="topNavibar">
      <div class="topNaviItem" v-for="item in topItem" @click="selectItem">
        <span>{{ item }} {{ Math.ceil(Math.random() * 20) }}</span>
      </div>
    </div>
    <hiddendanger v-if="itemshow.hiddendanger" />
    <cleartask v-if="itemshow.cleartask" />
    <equipment v-if="itemshow.equipment" />
    <task v-if="itemshow.task" />
    <repairstask v-if="itemshow.repairstask" />
    <div id="mars3dcontent" style="height: 100%"></div>
  </div>
</template>

<script setup>
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css"; //依赖的cesium库本身css
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
import { onMounted, reactive, onUnmounted } from "vue";
import { mapOptions } from "../utils/mapOptions";
import hiddendanger from "./home/hiddendanger.vue";
import repairstask from "./home/repairstask.vue";
import cleartask from "./home/cleartask.vue";
import equipment from "./home/equipment.vue";
import task from "./home/task.vue";
// api
import { head } from "@/api/homepage/home";

let topItem = ["隐患数", "设备在线数", "任务总数", "本月修复总数", "本月清涛公里数"];
let itemshow = reactive({
  cleartask: false,
  equipment: false,
  hiddendanger: false,
  repairstask: false,
  task: false,
});
let map;

onMounted(() => {
  map = new mars3d.Map("mars3dcontent", mapOptions);
});

onUnmounted(() => {
  destroyMap();
});

function hiddenAllItem() {
  let keys = Object.keys(itemshow);
  for (const key of keys) {
    itemshow[key] = false;
  }
}

function destroyMap() {
  if (!map) {
    return;
  }
  map.destroy();
  map = null;
}

function selectItem(e) {
  hiddenAllItem();
  let content = e.srcElement.textContent.split(" ")[0];
  console.log(content);
  if (content == "隐患数") {
    itemshow.hiddendanger = true;
  }
  if (content == "设备在线数") {
    itemshow.equipment = true;
  }
  if (content == "任务总数") {
    itemshow.task = true;
  }
  if (content == "本月修复总数") {
    itemshow.repairstask = true;
  }
  if (content == "本月清涛公里数") {
    itemshow.cleartask = true;
  }
}

head().then((res) => {
  console.log(res);
});
</script>

<style scoped>
#mars3d {
  width: 100%;
  height: 100%;
  position: fixed;
}

.topNaviItem {
  width: 200px;
  height: 70px;
  font-size: larger;
  color: black;
  display: flex;
  background-color: aliceblue;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  cursor: pointer;
}

.topNavibar {
  margin-left: 15%;
  width: 70%;
  height: 10vh;
  position: fixed;
  top: 140px;
  z-index: 99;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}
</style>
